<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>游戏介绍</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/game-introduce.css">
</head>
<body>
	<div class="game_introduce">
		<!-- 导航 -->
		<div class="nav">
			<div class="kk_logo">
				<img src="img/index/kk_logo.png">
			</div>
			<nav>
				<a href="index.html"><span data-hover="首页">首页</span></a>
				<a href="kk-dynamic.html"><span data-hover="KK动态" style="width: 64px;">KK动态</span></a>
				<a href="game-introduce.html" style="color: rgb(144,38,242)"><span data-hover="游戏介绍">游戏介绍</span></a>
				<a href="personal-account.html"><span data-hover="个人账号">个人账号</span></a>
				<a href="recharge-center.html"><span data-hover="充值中心">充值中心</span></a>
				<a href="customer-service.html"><span data-hover="客服问答">客服问答</span></a>
			</nav>
		</div>
		<!-- 引入导航 -->
		<!-- <iframe src="nav.html" frameBorder=0 scrolling=no width="100%" height="70px" style="margin-top: 15px;" id="naviframe"></iframe> -->
		<!-- 分割线 -->
		<div style="height: 5px; background-color: #291D71"></div>
		<!-- 头部 -->
		<div class="top">
			<h1 class="title">
				<img src="img/game_introduce/game_introduce_title.png">
			</h1>
		</div>
		<!-- 游戏下载 -->
		<div class="game_download">
			<div class="qr_code">
				<div class="pic">
					<img src="img/game_introduce/game_introduce_gameDownload.png">
				</div>
				<div class="btn">
					<button></button>
					<button></button>
				</div>
			</div>
		</div>
		<!-- 游戏分类（游戏介绍不超过33个字体） -->
		<div class="game_classify">
			<div class="classify">
				<h2 class="title">
					<img src="img/game_introduce/game_introduce_video_games.png">
				</h2>
				<ul>
					<li>
						<img src="img/index/index_video_games_pic1.png">
						<div class="text">
							<p>游戏介绍</p>
							<p class="specific_introduce">介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介</p>
						</div>
					</li>
					<li>
						<img src="img/index/index_video_games_pic2.png">
						<div class="text">
							<p>游戏介绍</p>
							<p>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介介绍介绍介介绍介介绍</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="classify">
				<h2>
					<img src="img/game_introduce/game_introduce__multiplayer_games.png">
				</h2>
				<ul>
					<li>
						<img src="img/index/index_multiplayer_games_pic1.png">
						<div class="text">
							<p>游戏介绍</p>
							<p>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</p>
						</div>
					</li>
					<li>
						<img src="img/index/index_multiplayer_games_pic2.png">
						<div class="text">
							<p>游戏介绍</p>
							<p>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</p>
						</div>
					</li>
					<li>
						<img src="img/index/index_multiplayer_games_pic3.png">	
						<div class="text">
							<p>游戏介绍</p>
							<p>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</p>
						</div>
					</li>
					<li>
						<img src="img/index/index_multiplayer_games_pic4.png">
						<div class="text">
							<p>游戏介绍</p>
							<p>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="classify">
				<h2>
					<img src="img/game_introduce/game_introduce_battle_games.png">
				</h2>
				<ul>
					<li>
						<img src="img/index/index_battle_games_pic1.png">
						<div class="text">
							<p>游戏介绍</p>
							<p>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</p>
						</div>
					</li>
					<li>
						<img src="img/index/index_battle_games_pic2.png">
						<div class="text">
							<p>游戏介绍</p>
							<p>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</p>
						</div>
					</li>
					<li>
						<img src="img/index/index_battle_games_pic3.png">
						<div class="text">
							<p>游戏介绍</p>
							<p>介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
	//  控制游戏介绍省略号是否显示
	var $introduceText = $('.game_classify .classify ul li .text p:nth-child(2)');
	for(var i=0; i<$introduceText.length; i++) {
		if($introduceText.eq(i).text().length<31){
			$introduceText.eq(i).addClass('hide');
		}
	 }
</script>
</html>